<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>我的朋友圈</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/app.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/alertPop/alertPopShow.js"></script>
    <link rel="stylesheet" href="/js/alertPop/common.css"/>
    <script src="/js/common.js"></script>

    <!--本页样式-->
    <style type="text/css">
        * {
            cursor: pointer;
        }

        .search-head {
            background-color: #4D4C4B;
            color: white;
            overflow-x: hidden;
        }

        .nav-search {
            padding: 7px;
        }

        .nav-search i {
            font-size: 18px;
            color: white;
        }

        .nav-search span {
            font-size: 15px;
        }

        .nav-search div:nth-child(2) {
            text-align: center;
        }

        .weui_mask_transition {
            display: none;
            position: fixed;
            z-index: 1;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0);
            -webkit-transition: background .3s;
            transition: background .3s;
        }

        .weui_fade_toggle {
            background: rgba(0, 0, 0, 0.6);
        }

        .weui_actionsheet {
            position: fixed;
            left: 0;
            bottom: 0;
            -webkit-transform: translate(0, 100%);
            -ms-transform: translate(0, 100%);
            transform: translate(0, 100%);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            z-index: 2;
            width: 100%;
            background-color: #EFEFF4;
            -webkit-transition: -webkit-transform .3s;
            transition: transform .3s;
        }

        .weui_actionsheet_toggle {
            -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        .weui_actionsheet_menu {
            background-color: #FFFFFF;
        }

        .weui_actionsheet_cell:before {
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            border-top: 1px solid #D9D9D9;
            -webkit-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            -ms-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }

        .weui_actionsheet_cell:first-child:before {
            display: none;
        }

        .weui_actionsheet_cell {
            position: relative;
            padding: 10px 0;
            text-align: center;
            font-size: 18px;
        }

        .weui_actionsheet_cell.title {
            color: #999;
        }

        .weui_actionsheet_action {
            margin-top: 6px;
            background-color: #FFFFFF;
        }

    </style>
    <script>
        //提交请求时.数组不需要加[]
        jQuery.ajaxSettings.traditional = true;
        //翻页参数
        var currentPage = 1;
        var pages;
        var loading = false;
        var dataContent = [];//动态数据
        var dataComment = [];//评论数据
        var commentIds = new Array();//每页的动态id

        $(function () {
            //获取登录者数据
            var user = JSON.parse(sessionStorage.getItem("user"));
            //使用登录者信息回显朋友圈头信息
            $("#bg").attr("src", user.coverImgUrl);
            $("#user-name").html(user.nickName);
            $("#avt").attr("src", user.headImgUrl);

            //点击相机图标，去写动态
            $(".writeDynamic i").click(function () {
                window.location.href = "/mine/friend/writeDynamic.html";
            })

            //查询方法，查询动态以及评论
            function query() {
                if (loading) {
                    return;
                }
                loading = true;
                //查动态
                $.get("/dynamicContent/" + user.id, {currentPage: currentPage, pageSize: 4}, function (data) {
                    commentIds = [];//清空动态id数组缓存
                    $.merge(dataContent, data.list);
                    console.log(data);
                    $("#list").renderValues({list: dataContent}, {
                        getHref: getHref,
                        getId: function (node, index) {
                            $(node).attr("id", "dynamicContent" + index);
                            commentIds.push(index);
                        },
                        getDynamicId: function (node, index) {
                            $(node).attr("data-id", index);
                        }
                    });
                    currentPage++;
                    pages = data.pages;
                    loading = false;
                    //图片绑定点击放大
                    $(".list-img").click(function () {
                        var url = $(this).attr("src");
                        $(document).dialog({
                            titleShow: false,
                            content: '<img src="' + url + '" width="100%">'
                        });
                    });

                    //为点赞按钮绑定点击事件
                    $(".like img").click(function () {
                        var $this = $(this)
                        var dynamicId = $this.closest(".po-cmt").find(".c-icon").data("id")
                        $.get("/friendPraise/" + dynamicId, {userId: user.id}, function (data) {
                            console.log(1);
                            console.log(data);
                            $this.closest(".like").find("span").html(data);
                        },"text")
                    })
                    //为评论图标绑定点击事件
                    $(".c-icon").click(function () {
                        var dynamicContentId = $(this).data("id");
                        //点击添加评论按钮，增加评论
                        var json = {};
                        var html = "<textarea class='confirm_input' placeholder='请输入' style='width: 100%'>";
                        popTipShow.confirm('回复', html, ['确 定', '取 消'],
                            function (e) {
                                //callback 处理按钮事件
                                var button = $(e.target).attr('class');
                                if (button == 'ok') {
                                    this.hide();

                                    //按下确定按钮执行的操作
                                    json["commentator.id"] = user.id;//评论人
                                    json.content = $(".confirm_input").val();//评论内容
                                    json["dynamic.id"] = dynamicContentId;//动态id
                                    console.log(json);
                                    $.post("/dynamicSecondaryReview", json, function (data) {
                                        if (data.success) {
                                            window.location.reload();
                                        }
                                    })
                                }
                                if (button == 'cancel') {
                                    this.hide();
                                }
                            }
                        );
                    })
                    //查评论
                    $.get("/dynamicSecondaryReview", {commentIds: commentIds}, function (data) {
                        $.each(data, function (index, node) {
                            var strContents = "";
                            $.each(node, function (ele, value) {
                                if (value.parentReview_id) {
                                    //二级评论
                                    strContents += "<a class='replyClass' data-name='" + value.lastUser_nickName + "'" +
                                        "data-parentId='" + value.id + "' data-dynamicContentId='" + value.dynamic_id + "'><span>" + value.lastUser_nickName + "</span> 回复\n" +
                                        "<span>" + value.parentUser_nickName + "</span> :" + value.content + "</a></br>"
                                } else {
                                    //一级评论
                                    strContents += "<a class='replyClass' data-name='" + value.lastUser_nickName + "' " +
                                        "data-parentId='" + value.id + "' data-dynamicContentId='" + value.dynamic_id + "'><span>" + value.lastUser_nickName + "</span> 回复\n :" +
                                        value.content + "</a></br>"
                                }
                            })
                            $("#dynamicContent" + node[0].dynamic_id).html(strContents);
                        })
                        //增加二级评论
                        $(".replyClass").click(function () {
                            var dynamicContentId = $(this).data("dynamiccontentid");
                            var parentId = $(this).data("parentid");
                            var name = $(this).data("name");
                            var json = {};
                            var html = "<textarea class='confirm_input' placeholder='回复" + name + "' style='width: 100%'>";
                            popTipShow.confirm('回复', html, ['确 定', '取 消'],
                                function (e) {
                                    //callback 处理按钮事件
                                    var button = $(e.target).attr('class');
                                    if (button == 'ok') {
                                        this.hide();

                                        //按下确定按钮执行的操作
                                        json["commentator.id"] = user.id;//评论人
                                        json.content = $(".confirm_input").val();//评论内容
                                        json["dynamic.id"] = dynamicContentId;//动态id
                                        json["dynamic.id"] = dynamicContentId;//id
                                        json["parentId"] = parentId;//id
                                        console.log(json);
                                        $.post("/dynamicSecondaryReview", json, function (data) {
                                            if (data.success) {
                                                window.location.reload();
                                            }
                                        })
                                    }
                                    if (button == 'cancel') {
                                        this.hide();
                                    }
                                }
                            );
                        })
                    })
                })
            }

            query();

            //滚动页面 触发事件 翻页
            $(window).scroll(function () {
                //判断是否滚动到底部了  窗口的高度+文档滚动的高度 大于等于 文档的高度
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    //如果当前页大于总页数就不查询了
                    if (currentPage <= pages) {
                        //查询
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '亲,已经到底了',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });
        })
    </script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>朋友圈</span>
        </div>
        <div class="col writeDynamic">
                <span style="float:right ">
                    <!--相机图片，写动态-->
                    <i class="fa fa-camera fa-2x"></i>
                </span>
        </div>
    </div>
</div>

<div style="margin:0 auto;display:none;">
    <img class="data-avt">
</div>
<header>
    <!--朋友圈封面-->
    <img id="bg" src="images/bg.jpg">
    <p id="user-name" class="data-name">谁的朋友圈</p>
    <img id="avt" class="data-avt" src="images/0.jpg">
</header>
<div id="main">
    <div id="list">
        <ul render-loop="list">
            <li>
                <!--头像-->
                <div class="po-avt-wrap">
                    <a data-url="/userProfiles.html?id=" render-fun="getHref" render-key="list.release.id">
                        <img class="po-avt" render-src="list.release.headImgUrl">
                    </a>
                </div>
                <div class="po-cmt">
                    <div class="po-hd">
                        <p class="po-name" renderhtml="list.release.nickName">发贴人</p>
                        <div class="post">
                            <p render-html="list.content"></p>
                            <!--内容图片-->
                            <div>
                                    <span render-loop="list.imgArr">
                                        <img class="data-avt list-img" render-src="list.imgArr.self"
                                             style="height: 80px;">
                                    </span>
                            </div>
                        </div>
                        <p class="time" render-html="list.createTime"></p>
                        <!--点赞图标-->
                        <img class="c-icon" src="images/c.png" render-fun="getDynamicId" render-key="list.id">
                    </div>
                    <div class="r">
                    </div>
                    <div class="cmt-wrap">
                        <!--谁点赞-->
                        <div class="like">
                            <img src="images/l.png">
                            <span render-html="list.friendPraisesString"></span>
                        </div>
                        <div class="cmt-list" render-fun="getId" render-key="list.id">
                            <!--评论内容-->
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

</body>
</html>